<template>
	<view class="user-set">


		<view class="list">
			<view class="item ">
				<view class="flex-between">
					<view class="self-center">头像</view>
					<!-- 	<view class="flex-between" @click="upload">
						<view class="mr10"><u-avatar
								src="https://v4.crmeb.net/uploads/store/comment/20230819/8fe37a89e638c20655b3c5459d0f54dd.jpg"
								size="100rpx"></u-avatar></view>
						<u-icon name="arrow-right" color="#999" size="16"></u-icon>
					</view> -->
					<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<view class="flex-between">
							<view class="mr10"><u-avatar
									:src="avatar.value"
									size="100rpx"></u-avatar></view>
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</button>
				</view>
			</view>
			<view class="item ">
				<view class="flex-between">
					<view class="self-center">昵称</view>
					<view class="input">
						<u-input type="nickname" v-model="name" placeholder="请输入昵称" inputAlign="right"
							:border="false"></u-input>
					</view>
				</view>
			</view>
			<view class="item ">
				<view class="flex-between">
					<view class="self-center">手机号</view>
					<view class="flex-between">
						<view>{{maskPhoneNumber(user.phone)}}</view>
						<u-icon name="lock"></u-icon>
					</view>
				</view>
			</view>
			<view class="item ">
				<view class="flex-between">
					<view class="self-center">ID号</view>
					<view class="flex-between">
						<text class="mr5">{{user.id}}</text>
						<u-icon name="lock"></u-icon>
					</view>
				</view>
			</view>
		</view>



		<view class="w94 " style="margin-top: 60rpx;">
			<u-button shape="circle" type="primary" @click="$u.throttle(saveInfo, 500)">保存修改</u-button>
		</view>
	</view>
</template>
<script setup>
	import {
		maskPhoneNumber
	} from "@/utils/index.js"
	import {
		HTTP_REQUEST_URL
	} from "@/config/app.js"
	import {
		ref,
		reactive
	} from "vue"
	let user = reactive(uni.getStorageSync('userInfo'))
	const name = ref('')
	const avatar = ref('https://v4.crmeb.net/uploads/store/comment/20230819/8fe37a89e638c20655b3c5459d0f54dd.jpg')
	const upload = () => {
		uni.chooseFile({
			success(file) {
				console.log(file)
			}
		})
		// uni.uploadFile({
		// 	url: HTTP_REQUEST_URL + '/api/upload'
		// })
	}
	const saveInfo = () => {
		console.log("昵称", name.value);
	}
	const chooseavatar = (e) => {
		console.log("头像", e);
		const {avatarUrl} = e.detail
		avatar.value=avatarUrl
		uni.uploadFile({
			url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
			filePath: avatarUrl,
			name: 'file',
			// formData: {
			// 	'user': 'test'
			// },
			success: (uploadFileRes) => {
				console.log("uploadFileRes",uploadFileRes);
			}
		})
	}
</script>
<style scoped lang="scss">
	button {
	  position: relative;
	  padding-left: 0;
	  padding-right: 0;
	  background-color: transparent;
	  margin: 0 !important;
	}
	
	button::after {
	  content: none !important;
	}
	.user-set {
		margin-top: 20rpx;



		.list {
			background-color: #fff;
			margin: 0 20rpx;
			margin-top: 20rpx;
			border-radius: 12px;

			.item {
				padding: 34rpx 20rpx 24rpx 24rpx;
				font-size: 16px;
				color: #333;

				.input {
					max-width: 245px;
				}
			}
		}

		.logout {
			font-size: 16px;
			text-align: center;
			color: #333;
			height: 52px;
			border-radius: 120px;
			margin: 16px auto 0 auto;
			background-color: #fff;
		}
	}
</style>